<ng-form name="secretForm" class="create-secret-form">
  <div for="secretType" ng-if="!type" class="form-group mar-top-lg">
    <label>Secret Type</label>
    <ui-select required ng-model="newSecret.type" search-enabled="false" ng-change="newSecret.authType = secretAuthTypeMap[newSecret.type].authTypes[0].id">
      <ui-select-match>{{$select.selected | upperFirst}} Secret</ui-select-match>
      <ui-select-choices repeat="type in secretTypes">
        {{type | upperFirst}} Secret
      </ui-select-choices>
    </ui-select>
  </div>

  <div ng-if="newSecret.type">
    <div class="form-group">
      <label for="secretName" class="required">Secret Name</label>
        <span ng-class="{'has-error': nameTaken || (secretForm.secretName.$invalid && secretForm.secretName.$touched)}">
          <input class="form-control"
            id="secretName"
            name="secretName"
            ng-model="newSecret.data.secretName"
            type="text"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="secret-name-help"
            ng-pattern="nameValidation.pattern"
            ng-maxlength="nameValidation.maxlength"
            ng-change="nameChanged()"
            required>
        </span>
        <div class="has-error" ng-show="nameTaken">
          <span class="help-block">
            This name is already in use. Please choose a different name.
          </span>
        </div>
        <div class="has-error" ng-show="secretForm.secretName.$invalid">
          <div ng-show="secretForm.secretName.$error.pattern && secretForm.secretName.$touched" class="help-block">
            {{nameValidation.description}}
          </div>
          <div ng-show="secretForm.secretName.$error.required && secretForm.secretName.$touched" class="help-block">
            Name is required.
          </div>
          <div ng-show="secretForm.secretName.$error.maxlength && secretForm.secretName.$touched" class="help-block">
            Can't be longer than {{nameValidation.maxlength}} characters.
          </div>
        </div>
        <div class="help-block" id="secret-name-help">
          Unique name of the new secret.
        </div>
    </div>
    <div class="form-group">
      <label for="authentificationType">Authentication Type</label>
      <ui-select required ng-model="newSecret.authType" search-enabled="false">
        <ui-select-match>{{$select.selected.label}}</ui-select-match>
        <ui-select-choices repeat="type.id as type in secretAuthTypeMap[newSecret.type].authTypes">
          {{type.label}}
        </ui-select-choices>
      </ui-select>
    </div>

    <div ng-if="newSecret.authType === 'kubernetes.io/basic-auth'">
      <div class="form-group">
        <label for="username">Username</label>
        <div>
          <input class="form-control"
            id="username"
            name="username"
            ng-model="newSecret.data.username"
            type="text"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="username-help">
        </div>
        <div class="help-block" id="username-help">
          Optional username for Git authentication.
        </div>
      </div>

      <div class="form-group" ng-class="{ 'has-error' : secretForm.passwordToken.$invalid && secretForm.passwordToken.$touched }">
        <label ng-class="{ required: !add.cacert && !add.gitconfig }" for="passwordToken">Password or Token</label>
        <input class="form-control"
          id="passwordToken"
          name="passwordToken"
          ng-model="newSecret.data.passwordToken"
          autocorrect="off"
          autocapitalize="none"
          spellcheck="false"
          aria-describedby="password-token-help"
          type="password"
          ng-required="!add.cacert && !add.gitconfig">
      </div>
      <div class="has-error" ng-show="secretForm.passwordToken.$error.required && secretForm.passwordToken.$touched">
        <div class="help-block">
          Password or token is required.
        </div>
      </div>
      <div class="help-block" id="password-token-help">
        Password or token for Git authentication. Required if a ca.crt or .gitconfig file is not specified.
      </div>

      <div class="form-group">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="add.cacert">
            Use a custom ca.crt file
          </label>
        </div>
      </div>
      <div class="form-group" ng-if="add.cacert" id="cacert">
        <label class="required" for="cacert">CA Certificate File</label>
        <osc-file-input
          id="cacert-file-input"
          model="newSecret.data.cacert"
          drop-zone-id="cacert"
          help-text="Upload your ca.crt file."
          required="true"></osc-file-input>
        <div ui-ace="{
          mode: 'txt',
          theme: 'eclipse',
          rendererOptions: {
            fadeFoldWidgets: true,
            showPrintMargin: false
          }
        }" ng-model="newSecret.data.cacert" class="create-secret-editor ace-bordered" id="cacert-editor" required></div>
      </div>


    </div>

    <div ng-if="newSecret.authType === 'kubernetes.io/ssh-auth'">
      <div class="form-group" id="private-key">
        <label for="privateKey" class="required">SSH Private Key</label>
        <osc-file-input
          id="private-key-file-input"
          model="newSecret.data.privateKey"
          drop-zone-id="private-key"
          help-text="Upload your private SSH key file."></osc-file-input>
        <div ui-ace="{
          theme: 'eclipse',
          rendererOptions: {
            fadeFoldWidgets: true,
            showPrintMargin: false
          }
        }" ng-model="newSecret.data.privateKey" class="create-secret-editor ace-bordered" id="private-key-editor" required></div>
        <div class="help-block">
          Private SSH key file for Git authentication.
        </div>
      </div>
    </div>

    <div ng-if="newSecret.type === 'source'">
      <div class="form-group">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="add.gitconfig">
            Use a custom .gitconfig file
          </label>
        </div>
      </div>

      <div class="form-group" ng-if="add.gitconfig" id="gitconfig">
        <label class="required" for="gitconfig">Git Configuration File</label>
        <osc-file-input
          id="gitconfig-file-input"
          model="newSecret.data.gitconfig"
          drop-zone-id="gitconfig"
          help-text="Upload your .gitconfig or  file."
          required="true"></osc-file-input>
        <div ui-ace="{
          mode: 'ini',
          theme: 'eclipse',
          rendererOptions: {
            fadeFoldWidgets: true,
            showPrintMargin: false
          }
        }" ng-model="newSecret.data.gitconfig" class="create-secret-editor ace-bordered" id="gitconfig-editor" required></div>
      </div>
    </div>

    <div ng-if="newSecret.authType === 'kubernetes.io/dockercfg'">
      <div class="form-group" ng-class="{ 'has-error' : secretForm.dockerServer.$invalid && secretForm.dockerServer.$touched }">
        <label for="dockerServer" class="required">Image Registry Server Address</label>
        <div>
          <input class="form-control"
            id="dockerServer"
            name="dockerServer"
            ng-model="newSecret.data.dockerServer"
            type="text"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            required>
        </div>
      </div>
      <div ng-show="secretForm.dockerServer.$error.required && secretForm.dockerServer.$touched" class="has-error">
        <div class="help-block">
          Image registry server address is required.
        </div>
      </div>

      <div class="form-group" ng-class="{ 'has-error' : secretForm.dockerUsername.$invalid && secretForm.dockerUsername.$touched }">
        <label for="dockerUsername" class="required">Username</label>
        <div>
          <input class="form-control"
            id="dockerUsername"
            name="dockerUsername"
            ng-model="newSecret.data.dockerUsername"
            type="text"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            required>
        </div>
      </div>
      <div ng-show="secretForm.dockerUsername.$error.required && secretForm.dockerUsername.$touched" class="has-error">
        <div class="help-block">
          Username is required.
        </div>
      </div>

      <div class="form-group" ng-class="{ 'has-error' : secretForm.dockerPassword.$invalid && secretForm.dockerPassword.$touched }">
        <label for="dockerPassword" class="required">Password</label>
        <div>
          <input class="form-control"
            id="dockerPassword"
            name="dockerPassword"
            ng-model="newSecret.data.dockerPassword"
            type="password"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            required>
        </div>
      </div>
      <div ng-show="secretForm.dockerPassword.$error.required && secretForm.dockerPassword.$touched" class="has-error">
        <div class="help-block">
          Password is required.
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : secretForm.dockerEmail.$invalid && secretForm.dockerEmail.$touched }">
        <label for="dockerEmail" class="required">Email</label>
        <div>
          <input class="form-control"
            type="email"
            id="dockerEmail"
            name="dockerEmail"
            ng-model="newSecret.data.dockerMail"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            required>
        </div>
      </div>
      <div class="has-error" ng-show="secretForm.dockerEmail.$invalid">
        <div ng-show="secretForm.dockerEmail.$error.email && secretForm.dockerEmail.$touched" class="help-block">
          Email must be in the form of <var>user@domain</var>.
        </div>
        <div ng-show="secretForm.dockerEmail.$error.required && secretForm.dockerEmail.$touched" class="help-block">
          Email is required.
        </div>
      </div>
    </div>

    <div ng-if="newSecret.authType === 'kubernetes.io/dockerconfigjson'">
      <div class="form-group" id="docker-config">
        <label for="dockerConfig" class="required">Configuration File</label>
        <osc-file-input
          id="dockercfg-file-input"
          model="newSecret.data.dockerConfig"
          drop-zone-id="docker-config"
          help-text="Upload a .dockercfg or .docker/config.json file"
          required="true"></osc-file-input>
        <div ui-ace="{
          mode: 'json',
          theme: 'eclipse',
          onChange: aceChanged,
          rendererOptions: {
            fadeFoldWidgets: true,
            showPrintMargin: false
          }
        }" ng-model="newSecret.data.dockerConfig" class="create-secret-editor ace-bordered" id="dockerconfig-editor" required></div>
        <div class="help-block">
          File with credentials and other configuration for connecting to a secured image registry.
        </div>
        <div class="has-warning" ng-show="invalidConfigFormat">
          <span class="help-block">
            Configuration file should be in JSON format.
          </span>
        </div>
      </div>
    </div>
    <div ng-if="('serviceaccounts' | canI : 'update') && !serviceAccountToLink">
      <div class="form-group">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="newSecret.linkSecret">
            Link secret to a service account.
            <a href="{{'managing_secrets' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
          </label>
        </div>
      </div>

      <div ng-if="newSecret.linkSecret">
        <div class="form-group">
          <label class="required">Service Account</label>
          <ui-select required ng-model="newSecret.pickedServiceAccountToLink">
            <ui-select-match placeholder="Service Account Name">{{$select.selected}}</ui-select-match>
            <ui-select-choices repeat="sa in (serviceAccountsNames | filter : $select.search)">
              <div ng-bind-html="sa | highlight : $select.search"></div>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>
    </div>
  </div>
  <div class="buttons gutter-top-bottom">
    <button class="btn btn-lg btn-primary"
            type="button"
            ng-disabled="secretForm.$invalid || secretForm.$pristine || invalidConfigFormat"
            ng-click="create()">Create</button>
    <button class="btn btn-lg btn-default"
            type="button"
            ng-click="cancel()">Cancel</button>
  </div>
</ng-form>
